<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
  <meta name="theme-color" content="#222">
  <meta name="generator" content="Hexo 5.4.0">


  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
  <link rel="mask-icon" href="/images/logo.svg" color="#222">

  <link rel="stylesheet" href="/css/main.css">



  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.2/css/all.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3.1.1/animate.min.css">

  <script class="hexo-configurations">
    var NexT = window.NexT || {};
    var CONFIG = {
      "hostname": "holidaypenguin.gitee.io",
      "root": "/",
      "images": "/images",
      "scheme": "Mist",
      "version": "8.2.2",
      "exturl": false,
      "sidebar": {
        "position": "right",
        "display": "always",
        "padding": 18,
        "offset": 12
      },
      "copycode": true,
      "bookmark": {
        "enable": false,
        "color": "#222",
        "save": "auto"
      },
      "fancybox": false,
      "mediumzoom": false,
      "lazyload": false,
      "pangu": false,
      "comments": {
        "style": "tabs",
        "active": null,
        "storage": true,
        "lazyload": false,
        "nav": null
      },
      "motion": {
        "enable": true,
        "async": true,
        "transition": {
          "post_block": "fadeIn",
          "post_header": "fadeInDown",
          "post_body": "fadeInDown",
          "coll_header": "fadeInLeft",
          "sidebar": "slideUpIn"
        }
      },
      "prism": false,
      "i18n": {
        "placeholder": "搜索...",
        "empty": "没有找到任何搜索结果：${query}",
        "hits_time": "找到 ${hits} 个搜索结果（用时 ${time} 毫秒）",
        "hits": "找到 ${hits} 个搜索结果"
      },
      "path": "/search.xml",
      "localsearch": {
        "enable": true,
        "trigger": "auto",
        "top_n_per_article": 1,
        "unescape": false,
        "preload": false
      }
    };
  </script>
  <meta property="og:type" content="article">
  <meta property="og:title" content="Fiddler抓包https">
  <meta property="og:url" content="https://holidaypenguin.gitee.io/blob/2017-08-24-fiddler-grab-pack-https/index.html">
  <meta property="og:site_name" content="HolidayPenguin">
  <meta property="og:locale" content="zh_CN">
  <meta property="og:image" content="https://holidaypenguin.gitee.io/images/fiddler/10.png">
  <meta property="og:image" content="https://holidaypenguin.gitee.io/images/fiddler/11.png">
  <meta property="og:image" content="https://holidaypenguin.gitee.io/images/fiddler/12.png">
  <meta property="og:image" content="https://holidaypenguin.gitee.io/images/fiddler/13.png">
  <meta property="og:image" content="https://holidaypenguin.gitee.io/images/fiddler/14.png">
  <meta property="og:image" content="https://holidaypenguin.gitee.io/images/fiddler/15.png">
  <meta property="og:image" content="https://holidaypenguin.gitee.io/images/fiddler/16.png">
  <meta property="og:image" content="https://holidaypenguin.gitee.io/images/fiddler/17.png">
  <meta property="article:published_time" content="2017-08-24T02:47:13.000Z">
  <meta property="article:modified_time" content="2017-08-24T02:47:13.000Z">
  <meta property="article:author" content="holidaypenguin">
  <meta property="article:tag" content="工具">
  <meta property="article:tag" content="Fiddler">
  <meta name="twitter:card" content="summary">
  <meta name="twitter:image" content="https://holidaypenguin.gitee.io/images/fiddler/10.png">


  <link rel="canonical" href="https://holidaypenguin.gitee.io/blob/2017-08-24-fiddler-grab-pack-https/">


  <script class="page-configurations">
    // https://hexo.io/docs/variables.html
    CONFIG.page = {
      sidebar: "",
      isHome: false,
      isPost: true,
      lang: 'zh-CN'
    };
  </script>
  <title>Fiddler抓包https | HolidayPenguin</title>





  <noscript>
    <style>
      body {
        margin-top: 2rem;
      }

      .use-motion .menu-item,
      .use-motion .sidebar,
      .use-motion .post-block,
      .use-motion .pagination,
      .use-motion .comments,
      .use-motion .post-header,
      .use-motion .post-body,
      .use-motion .collection-header {
        visibility: visible;
      }

      .use-motion .header,
      .use-motion .site-brand-container .toggle,
      .use-motion .footer {
        opacity: initial;
      }

      .use-motion .site-title,
      .use-motion .site-subtitle,
      .use-motion .custom-logo-image {
        opacity: initial;
        top: initial;
      }

      .use-motion .logo-line {
        transform: scaleX(1);
      }

      .search-pop-overlay,
      .sidebar-nav {
        display: none;
      }

      .sidebar-panel {
        display: block;
      }
    </style>
  </noscript>

</head>

<body itemscope itemtype="http://schema.org/WebPage" class="use-motion">
  <div class="headband"></div>

  <main class="main">
    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner">
        <div class="site-brand-container">
          <div class="site-nav-toggle">
            <div class="toggle" aria-label="切换导航栏" role="button">
              <span class="toggle-line"></span>
              <span class="toggle-line"></span>
              <span class="toggle-line"></span>
            </div>
          </div>

          <div class="site-meta">

            <a href="/" class="brand" rel="start">
              <i class="logo-line"></i>
              <h1 class="site-title">HolidayPenguin</h1>
              <i class="logo-line"></i>
            </a>
          </div>

          <div class="site-nav-right">
            <div class="toggle popup-trigger">
              <i class="fa fa-search fa-fw fa-lg"></i>
            </div>
          </div>
        </div>



        <nav class="site-nav">
          <ul class="main-menu menu">
            <li class="menu-item menu-item-home"><a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a></li>
            <li class="menu-item menu-item-tags"><a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a></li>
            <li class="menu-item menu-item-categories"><a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a></li>
            <li class="menu-item menu-item-archives"><a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a></li>
            <li class="menu-item menu-item-search">
              <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
              </a>
            </li>
          </ul>
        </nav>



        <div class="search-pop-overlay">
          <div class="popup search-popup">
            <div class="search-header">
              <span class="search-icon">
                <i class="fa fa-search"></i>
              </span>
              <div class="search-input-container">
                <input autocomplete="off" autocapitalize="off" maxlength="80" placeholder="搜索..." spellcheck="false" type="search" class="search-input">
              </div>
              <span class="popup-btn-close" role="button">
                <i class="fa fa-times-circle"></i>
              </span>
            </div>
            <div class="search-result-container no-result">
              <div class="search-result-icon">
                <i class="fa fa-spinner fa-pulse fa-5x"></i>
              </div>
            </div>

          </div>
        </div>

      </div>


      <div class="toggle sidebar-toggle" role="button">
        <span class="toggle-line"></span>
        <span class="toggle-line"></span>
        <span class="toggle-line"></span>
      </div>

      <aside class="sidebar">

        <div class="sidebar-inner sidebar-nav-active sidebar-toc-active">
          <ul class="sidebar-nav">
            <li class="sidebar-nav-toc">
              文章目录
            </li>
            <li class="sidebar-nav-overview">
              站点概览
            </li>
          </ul>

          <div class="sidebar-panel-container">
            <!--noindex-->
            <div class="post-toc-wrap sidebar-panel">
              <div class="post-toc animated">
                <ol class="nav">
                  <li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%8E%9F%E7%90%86"><span class="nav-number">1.</span> <span class="nav-text">原理</span></a>
                    <ol class="nav-child">
                      <li class="nav-item nav-level-2"><a class="nav-link" href="#fiddler%E6%8A%93%E5%8C%85%E5%8E%9F%E7%90%86"><span class="nav-number">1.1.</span> <span class="nav-text">fiddler抓包原理</span></a></li>
                      <li class="nav-item nav-level-2"><a class="nav-link" href="#fiddler%E8%A7%A3%E5%AF%86https%E5%8E%9F%E7%90%86"><span class="nav-number">1.2.</span> <span class="nav-text">fiddler解密https原理</span></a></li>
                    </ol>
                  </li>
                  <li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%BC%80%E5%A7%8B%E6%8A%93%E5%8C%85"><span class="nav-number">2.</span> <span class="nav-text">开始抓包</span></a>
                    <ol class="nav-child">
                      <li class="nav-item nav-level-2"><a class="nav-link" href="#%E8%AE%BE%E7%BD%AEfiddler%E6%8A%93%E5%8C%85"><span class="nav-number">2.1.</span> <span class="nav-text">设置fiddler抓包</span></a></li>
                      <li class="nav-item nav-level-2"><a class="nav-link" href="#%E8%AE%BE%E7%BD%AE%E6%8A%93https%E5%92%8C%E8%A7%A3%E5%AF%86https"><span class="nav-number">2.2.</span> <span class="nav-text">设置抓https和解密https</span></a></li>
                    </ol>
                  </li>
                  <li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98"><span class="nav-number">3.</span> <span class="nav-text">常见问题</span></a>
                    <ol class="nav-child">
                      <li class="nav-item nav-level-2"><a class="nav-link" href="#http-tunnel%E3%80%81http-connect"><span class="nav-number">3.1.</span> <span class="nav-text">http tunnel、http connect</span></a></li>
                      <li class="nav-item nav-level-2"><a class="nav-link" href="#%E8%A7%A3%E5%AF%86%E5%A4%B1%E8%B4%A5"><span class="nav-number">3.2.</span> <span class="nav-text">解密失败</span></a></li>
                      <li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%8A%93%E4%B8%8D%E5%88%B0%E6%89%8B%E6%9C%BA%E5%BE%AE%E4%BF%A1"><span class="nav-number">3.3.</span> <span class="nav-text">抓不到手机微信</span></a></li>
                    </ol>
                  </li>
                </ol>
              </div>
            </div>
            <!--/noindex-->

            <div class="site-overview-wrap sidebar-panel">
              <div class="site-author site-overview-item animated" itemprop="author" itemscope itemtype="http://schema.org/Person">
                <p class="site-author-name" itemprop="name">holidaypenguin</p>
                <div class="site-description" itemprop="description"></div>
              </div>
              <div class="site-state-wrap site-overview-item animated">
                <nav class="site-state">
                  <div class="site-state-item site-state-posts">
                    <a href="/archives/">

                      <span class="site-state-item-count">138</span>
                      <span class="site-state-item-name">日志</span>
                    </a>
                  </div>
                  <div class="site-state-item site-state-categories">
                    <a href="/categories/">

                      <span class="site-state-item-count">26</span>
                      <span class="site-state-item-name">分类</span></a>
                  </div>
                  <div class="site-state-item site-state-tags">
                    <a href="/tags/">

                      <span class="site-state-item-count">234</span>
                      <span class="site-state-item-name">标签</span></a>
                  </div>
                </nav>
              </div>
              <div class="links-of-author site-overview-item animated">
                <span class="links-of-author-item">
                  <a href="https://github.com/holidaypenguin" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;holidaypenguin" rel="noopener" target="_blank"><i class="github fa-fw"></i>GitHub</a>
                </span>
                <span class="links-of-author-item">
                  <a href="mailto:songshipeng2016@gmail.com" title="E-Mail → mailto:songshipeng2016@gmail.com" rel="noopener" target="_blank"><i class="envelope fa-fw"></i>E-Mail</a>
                </span>
              </div>



            </div>
          </div>
        </div>
      </aside>
      <div class="sidebar-dimmer"></div>


    </header>


    <div class="back-to-top" role="button">
      <i class="fa fa-arrow-up"></i>
      <span>0%</span>
    </div>

    <noscript>
      <div class="noscript-warning">Theme NexT works best with JavaScript enabled</div>
    </noscript>


    <div class="main-inner post posts-expand">





      <div class="post-block">



        <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="zh-CN">
          <link itemprop="mainEntityOfPage" href="https://holidaypenguin.gitee.io/blob/2017-08-24-fiddler-grab-pack-https/">

          <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
            <meta itemprop="image" content="/images/avatar.gif">
            <meta itemprop="name" content="holidaypenguin">
            <meta itemprop="description" content="">
          </span>

          <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
            <meta itemprop="name" content="HolidayPenguin">
          </span>
          <header class="post-header">
            <h1 class="post-title" itemprop="name headline">
              Fiddler抓包https
            </h1>

            <div class="post-meta-container">
              <div class="post-meta">
                <span class="post-meta-item">
                  <span class="post-meta-item-icon">
                    <i class="far fa-calendar"></i>
                  </span>
                  <span class="post-meta-item-text">发表于</span>

                  <time title="创建时间：2017-08-24 10:47:13" itemprop="dateCreated datePublished" datetime="2017-08-24T10:47:13+08:00">2017-08-24</time>
                </span>
                <span class="post-meta-item">
                  <span class="post-meta-item-icon">
                    <i class="far fa-folder"></i>
                  </span>
                  <span class="post-meta-item-text">分类于</span>
                  <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                    <a href="/categories/Fiddler/" itemprop="url" rel="index"><span itemprop="name">Fiddler</span></a>
                  </span>
                </span>


                <span id="/blob/2017-08-24-fiddler-grab-pack-https/" class="post-meta-item leancloud_visitors" data-flag-title="Fiddler抓包https" title="阅读次数">
                  <span class="post-meta-item-icon">
                    <i class="far fa-eye"></i>
                  </span>
                  <span class="post-meta-item-text">阅读次数：</span>
                  <span class="leancloud-visitors-count"></span>
                </span>
              </div>

              <div class="post-description">
                <!-- more -->
              </div>
            </div>
          </header>




          <div class="post-body" itemprop="articleBody">
            <p><a target="_blank" rel="noopener" href="http://blog.csdn.net/wangjun5159/article/details/52198842">原文1</a><br><a target="_blank" rel="noopener" href="http://blog.csdn.net/wangjun5159/article/details/54142016">原文2</a></p>
            <h1 id="原理"><a href="#原理" class="headerlink" title="原理"></a>原理</h1>
            <h2 id="fiddler抓包原理"><a href="#fiddler抓包原理" class="headerlink" title="fiddler抓包原理"></a>fiddler抓包原理</h2>
            <p><code>fiddler</code> 调试器注册到操作系统因特网服务中，系统所有的网络请求都会走<code>fiddler</code>的代理，所以<code>fiddler</code>才能抓包。</p>
            <p>Debug traffic from any client and browser<br>Fiddler helps you debug traffic from any browser: Internet Explorer, Chrome, Firefox, Safari, Opera, and more. Once you start Fiddler, the web debugger registers itself as the system proxy for Microsoft Windows Internet Services (WinINet), the HTTP layer used by Internet Explorer, Microsoft Office, and many other products. As the system proxy, all HTTP requests from WinINet flow through Fiddler before reaching the target web servers. Similarly, all HTTP responses flow through Fiddler before being returned to the client application.<br>Additionally, most devices that support Wi-Fi or Ethernet can be configured to send their traffic to Fiddler; this includes iOS, Android, Windows Phone and Windows RT devices.</p>
            <h2 id="fiddler解密https原理"><a href="#fiddler解密https原理" class="headerlink" title="fiddler解密https原理"></a>fiddler解密https原理</h2>
            <p>其实<code>fiddler</code>就是中间人攻击，依次经过如下过程</p>
            <ul>
              <li><code>fiddler</code>接到客户端的<code>https</code>请求，<code>fiddler</code>将请求转发给服务器</li>
              <li>服务器生成公钥证书，返回给<code>fiddler</code>；<code>fiddler</code>拦截下真的公钥证书，并生成伪造的公钥证书给客户端；</li>
              <li>客户端使用伪造的公钥证书加密共享密钥发送给<code>fiddler</code>，<code>fiddler</code>使用伪造的私钥解密获取共享密钥</li>
              <li><code>fiddler</code>将解密后的共享密钥，使用真正的公钥加密发送给服务器端，服务器使用共享密钥与<code>fiddler</code>通信</li>
              <li><code>fiddler</code>使用共享密钥与客户端通信<br>以上是<code>fiddler</code>抓包解密的原理，这个原理是建立在<code>https</code>建立连接的基础上的，请参考<a target="_blank" rel="noopener" href="http://blog.csdn.net/wangjun5159/article/details/51510594">https建立连接过程</a></li>
            </ul>
            <h1 id="开始抓包"><a href="#开始抓包" class="headerlink" title="开始抓包"></a>开始抓包</h1>
            <h2 id="设置fiddler抓包"><a href="#设置fiddler抓包" class="headerlink" title="设置fiddler抓包"></a>设置fiddler抓包</h2>
            <p>File—–&gt;capture traffic</p>
            <h2 id="设置抓https和解密https"><a href="#设置抓https和解密https" class="headerlink" title="设置抓https和解密https"></a>设置抓https和解密https</h2>
            <p>Tools—–&gt;fiddler options—–&gt;https—–&gt;capture https traffic—-&gt;decrypt https traffic—&gt;Ignore server certificate errors—-&gt;Actions—–&gt;Trust root certificate—-&gt;之后都是确定</p>
            <p><img src="" data-original="/images/fiddler/10.png" alt="10"><br><img src="" data-original="/images/fiddler/11.png" alt="11"></p>
            <p>安装根证书后，可以点击Actions—–&gt;open windows certificate manager查看安装到系统的根证书 </p>
            <p><img src="" data-original="/images/fiddler/12.png" alt="12"></p>
            <p>根证书的作用：fiddler对每个域名都会生成公钥证书，浏览器会用根证书验证公钥证书的合法性，所以，根证书是https 抓包必不可少的部分<br>效果<br>我们那支付宝登陆界面做测试，支付宝登陆页面 </p>
            <p><img src="" data-original="/images/fiddler/13.png" alt="13"></p>
            <h1 id="常见问题"><a href="#常见问题" class="headerlink" title="常见问题"></a>常见问题</h1>
            <h2 id="http-tunnel、http-connect"><a href="#http-tunnel、http-connect" class="headerlink" title="http tunnel、http connect"></a>http tunnel、http connect</h2>
            <p>有一种情况，**host都是tunnel to， url 后边都带着443，这是什么意思呢？ **<br>查看，请求头会发现使用了<code>Connect</code>方法，<code>Connect</code>方法通常会建议代理<code>(fiddler)</code>与目标服务器建立<code>http tunnel</code>；尽管<code>Connect</code>也可以用于<code>http</code>，但是一般是用于<code>SSL</code>通信；</p>
            <p><code>CONNECT www.google.com:443</code> </p>
            <p>这句话表示，代理与服务器的<code>443</code>端口建立了<code>http tunnel</code>，在此之后，所有由客户端发送的内容，都会经由<code>http</code> 代理，转发给<code>www.google.com:443</code>端口；更多http tunnel&amp;http connect资料可以参考<a target="_blank" rel="noopener" href="http://blog.csdn.net/wangjun5159/article/details/54142016">http tunnel&amp;connect</a></p>
            <h2 id="解密失败"><a href="#解密失败" class="headerlink" title="解密失败"></a>解密失败</h2>
            <p>有的时候，发现解密失败，这是可以查看<code>connect</code>的<code>log</code>。如图</p>
            <p><img src="" data-original="/images/fiddler/14.png" alt="14"></p>
            <p>通过查看响应，我们看到，是由于没有设置解密导致的，<br>This is a CONNECT tunnel, through which encrypted HTTPS traffic flows.<br>Fiddler’s HTTPS Decryption feature is enabled, but this specific tunnel was configured not to be decrypted. Settings can be found inside Tools &gt; Fiddler Options &gt; HTTPS.<br>A SSLv3-compatible ServerHello handshake was found. Fiddler extracted the parameters below.<br><code>Tools &gt; Fiddler Options &gt; HTTPS</code>，选中解密<code>https</code>，选择正确的来源，解密成功。 </p>
            <p><img src="" data-original="/images/fiddler/15.png" alt="15"></p>
            <p>当然，如果不想显示<code>Connect</code>，你也可以设置<code>rules-----&gt;hide connects</code> 隐藏<code>connect</code>；<br>如果还是解密失败，可以查看<code>Log</code>标签页，错误信息都会在这里边显示。 </p>
            <p><img src="" data-original="/images/fiddler/16.png" alt="16"></p>
            <h2 id="抓不到手机微信"><a href="#抓不到手机微信" class="headerlink" title="抓不到手机微信"></a>抓不到手机微信</h2>
            <p>有网友跟我说，抓不到手机微信的数据，这是因为，微信走的http2协议，fiddler不支持http2协议，所以用wireshark抓，但http2也是加密的，所以抓到的数据看不懂。 </p>
            <p><img src="" data-original="/images/fiddler/17.png" alt="17"></p>

          </div>





          <footer class="post-footer">
            <div class="post-tags">
              <a href="/tags/%E5%B7%A5%E5%85%B7/" rel="tag"># 工具</a>
              <a href="/tags/Fiddler/" rel="tag"># Fiddler</a>
            </div>



            <div class="post-nav">
              <div class="post-nav-item">
                <a href="/blob/2017-08-24-fiddler-handset-grab-bag/" rel="prev" title="Fiddler手机抓包">
                  <i class="fa fa-chevron-left"></i> Fiddler手机抓包
                </a>
              </div>
              <div class="post-nav-item">
                <a href="/blob/2017-09-11-npm-module-manager/" rel="next" title="npm模块管理器">
                  npm模块管理器 <i class="fa fa-chevron-right"></i>
                </a>
              </div>
            </div>
          </footer>
        </article>
      </div>







      <script>
        window.addEventListener('tabs:register', () => {
          let {
            activeClass
          } = CONFIG.comments;
          if (CONFIG.comments.storage) {
            activeClass = localStorage.getItem('comments_active') || activeClass;
          }
          if (activeClass) {
            const activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
            if (activeTab) {
              activeTab.click();
            }
          }
        });
        if (CONFIG.comments.storage) {
          window.addEventListener('tabs:click', event => {
            if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
            const commentClass = event.target.classList[1];
            localStorage.setItem('comments_active', commentClass);
          });
        }
      </script>
    </div>
  </main>

  <footer class="footer">
    <div class="footer-inner">


      <div class="copyright">
        &copy;
        <span itemprop="copyrightYear">2021</span>
        <span class="with-love">
          <i class="fa fa-heart"></i>
        </span>
        <span class="author" itemprop="copyrightHolder">holidaypenguin</span>
      </div>
      <div class="powered-by">由 <a href="https://hexo.io/" class="theme-link" rel="noopener" target="_blank">Hexo</a> & <a href="https://theme-next.js.org/mist/" class="theme-link" rel="noopener" target="_blank">NexT.Mist</a> 强力驱动
      </div>

    </div>
  </footer>


  <script size="300" alpha="0.1" zIndex="-1" src="https://cdn.jsdelivr.net/npm/ribbon.js@1.0.2/dist/ribbon.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js"></script>
  <script src="/js/love.js"></script>

  <script src="/js/development.js"></script>
  <script src="/js/utils.js"></script>
  <script src="/js/motion.js"></script>
  <script src="/js/schemes/muse.js"></script>
  <script src="/js/next-boot.js"></script>


  <script src="/js/local-search.js"></script>









  <script>
    (function() {
      function leancloudSelector(url) {
        url = encodeURI(url);
        return document.getElementById(url).querySelector('.leancloud-visitors-count');
      }

      function addCount(Counter) {
        const visitors = document.querySelector('.leancloud_visitors');
        const url = decodeURI(visitors.id);
        const title = visitors.dataset.flagTitle;

        Counter('get', '/classes/Counter?where=' + encodeURIComponent(JSON.stringify({
            url
          })))
          .then(response => response.json())
          .then(({
            results
          }) => {
            if (results.length > 0) {
              const counter = results[0];
              leancloudSelector(url).innerText = counter.time + 1;
              Counter('put', '/classes/Counter/' + counter.objectId, {
                  time: {
                    '__op': 'Increment',
                    'amount': 1
                  }
                })
                .catch(error => {
                  console.error('Failed to save visitor count', error);
                });
            } else {
              Counter('post', '/classes/Counter', {
                  title,
                  url,
                  time: 1
                })
                .then(response => response.json())
                .then(() => {
                  leancloudSelector(url).innerText = 1;
                })
                .catch(error => {
                  console.error('Failed to create', error);
                });
            }
          })
          .catch(error => {
            console.error('LeanCloud Counter Error', error);
          });
      }

      function showTime(Counter) {
        const visitors = document.querySelectorAll('.leancloud_visitors');
        const entries = [...visitors].map(element => {
          return decodeURI(element.id);
        });

        Counter('get', '/classes/Counter?where=' + encodeURIComponent(JSON.stringify({
            url: {
              '$in': entries
            }
          })))
          .then(response => response.json())
          .then(({
            results
          }) => {
            for (let url of entries) {
              const target = results.find(item => item.url === url);
              leancloudSelector(url).innerText = target ? target.time : 0;
            }
          })
          .catch(error => {
            console.error('LeanCloud Counter Error', error);
          });
      }

      const {
        app_id,
        app_key,
        server_url
      } = {
        "enable": true,
        "app_id": "povuqNsSqFodlakVIwtEX5kb-gzGzoHsz",
        "app_key": "zXD40RDtDB3DMtpC89k0AK7g",
        "server_url": null,
        "security": false
      };

      function fetchData(api_server) {
        const Counter = (method, url, data) => {
          return fetch(`${api_server}/1.1${url}`, {
            method,
            headers: {
              'X-LC-Id': app_id,
              'X-LC-Key': app_key,
              'Content-Type': 'application/json',
            },
            body: JSON.stringify(data)
          });
        };
        if (CONFIG.page.isPost) {
          if (CONFIG.hostname !== location.hostname) return;
          addCount(Counter);
        } else if (document.querySelectorAll('.post-title-link').length >= 1) {
          showTime(Counter);
        }
      }

      const api_server = app_id.slice(-9) === '-MdYXbMMI' ? `https://${app_id.slice(0, 8).toLowerCase()}.api.lncldglobal.com` : server_url;

      if (api_server) {
        fetchData(api_server);
      } else {
        fetch('https://app-router.leancloud.cn/2/route?appId=' + app_id)
          .then(response => response.json())
          .then(({
            api_server
          }) => {
            fetchData('https://' + api_server);
          });
      }
    })();
  </script>



<script>
            window.imageLazyLoadSetting = {
                isSPA: false,
                preloadRatio: 1,
                processImages: null,
            };
        </script><script>window.addEventListener("load",function(){var t=/\.(gif|jpg|jpeg|tiff|png)$/i,r=/^data:image\/[a-z]+;base64,/;Array.prototype.slice.call(document.querySelectorAll("img[data-original]")).forEach(function(a){var e=a.parentNode;"A"===e.tagName&&(e.href.match(t)||e.href.match(r))&&(e.href=a.dataset.original)})});</script><script>!function(n){n.imageLazyLoadSetting.processImages=o;var e=n.imageLazyLoadSetting.isSPA,i=n.imageLazyLoadSetting.preloadRatio||1,r=Array.prototype.slice.call(document.querySelectorAll("img[data-original]"));function o(){e&&(r=Array.prototype.slice.call(document.querySelectorAll("img[data-original]")));for(var t,a=0;a<r.length;a++)0<=(t=(t=r[a]).getBoundingClientRect()).bottom&&0<=t.left&&t.top<=(n.innerHeight*i||document.documentElement.clientHeight*i)&&function(){var t,e,n,i,o=r[a];t=o,e=function(){r=r.filter(function(t){return o!==t})},n=new Image,i=t.getAttribute("data-original"),n.onload=function(){t.src=i,e&&e()},t.src!==i&&(n.src=i)}()}o(),n.addEventListener("scroll",function(){var t,e;t=o,e=n,clearTimeout(t.tId),t.tId=setTimeout(function(){t.call(e)},500)})}(this);</script></body>

</html>